<template>
  <div>
    <div class="search-con">
      <input
        type="text"
        v-model="keywords"
        placeholder="请输入新闻标题进行搜索"
        @keydown="onSearch($event)"
      />
    </div>
    <div class="news-info">
      <div
        class="block"
        v-for="item in reverseList"
        :key="item.id"
        @click="toDetail(item.id)"
      >
        <!-- {{item.img_url}} -->
        <img :src="circleUrl + item.img_url" width="100px" height="100px" />
        <div class="detail-info">
          <h1>{{ item.title }}</h1>
          <p class="bottom-info">
            <span
              >发表时间：{{
                item.add_time | dataFormat("YYYY-MM-DD HH:mm:ss")
              }}</span
            >
            <!-- <span style="color: orange">点击：{{ item.click }}次</span> -->
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      circleUrl: "http://localhost:9528/admin/news_info/downloadPic?img_url=",
      keywords: "",
      newslist: [], //3.默认在页面上挂载一个新数组
    };
  },
  created() {
    // 2.每当页面加载的时候，就获取数据
    this.getNewsList();
  },
  computed:{
    reverseList(){
      return this.newslist.reverse();
    }
  },
  methods: {
    onSearch(e) {
      if (e.keyCode == 13) {
        this.$http
          .get("/searchNews", {
            params: {
              title: this.keywords,
            },
          })
          .then((res) => {
            if (res.data.errcode === 200) {
              const data = res.data.message;
              this.newslist = data;
            } else {
              this.newslist = [];
            }
          });
      }
    },
    getNewsList() {
      this.$http.get("/getNewsList").then((res) => {
        if (res.data.errcode === 200) {
          let data = res.data.message;
          this.newslist = data;
        } else {
          this.newslist = [];
        }
      });
    },
    toDetail(id) {
      this.$router.push("/idssp/news/newsinfo/" + id);
    },
  },
};
</script>

<style lang="scss" scoped>
.search-con {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  // margin: 5px 10px -5px 10px;
  padding: 10px 10px 0 10px;
  background-color: #fff;
  z-index: 999;
  input {
    text-indent: 20px;
    height: 35px;
    background: url("../../assets/img/search.png") no-repeat;
    background-size: 25px 25px;
    background-position-x: left;
    background-position-y: center;
  }
}
.news-info {
  margin-top: 50px;
  .block {
    margin: 10px 15px;
    border-bottom: 1px solid #efeff0;
    display: flex;
    img {
      display: block;
      margin-top: 10px;
      margin-right: 20px;
    }
    .detail-info {
      width: 100%;
      h1 {
        font-size: 16px;
        line-height: 20px;
      }
      .bottom-info {
        font-size: 12px;
        color: #e25b45;
        margin-top: 60px;
        text-align: right;
      }
    }
  }
}
.mui-media-body {
  h1 {
    font-size: 16px;
    // font-weight: 1000;
  }
  .mui-ellipsis {
    font-size: 12px;
    color: #e25b45;
    display: flex;
    //主轴：从左到右 space-between:靠左右两边的元素靠边 space-around:右侧空白=左侧空白
    justify-content: space-between;
    //align-items: 侧轴：从上到下
  }
}
</style>